Github Websites and Quarto
Today, we learn how to make a website to showcase everything we have done.
Your website address will be username.github.io.
For this reason, you might want to give a bit of thought to what makes the most sense for a username.
It will be difficult to change the user name and how the website will look, once you have set it up.
Having of website is beneficial:
We now can create a Github account.
Github is a developer platform that allows developers to create, store, manage and share their code.
With Github, it easy to share code with the world.
It is also easy to have your Quarto website stored
Selecting the username is crucially important
Selecting the username is crucially important
This is the username. This will appear in username.github.io
Selecting the username is crucially important
This is the username. This will appear in username.github.io
In this case, it will be bgpopescu2. This will appear in bgpopescu2.github.io
We now need to add a .nojekyll file to the root of our repository
This tells GitHub Pages not to do additional processing of your published site using Jekyll
Mac
Windows
You should now see your website on of your computer
If you’re not comfortable with where it is, place it somewhere where you feel more confortable with having it
Next, go to GitHub Desktop
This will be the (friendly) means of communication between GitHub and your computer
This means that you first make those changes on your computer
You will then upload those changes to GitHub, which hosts your website
Download GitHub Desktop and install it on your machine
After you have installed GitHub Desktop, sign in
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Authorize the app - “GitHub Desktop” to access your GitHub account
Now that we installed GitHub Desktop, making changes is easy
Let us go back to the original folder and make changes
It may take up to 10 minutes to see changes on the actual website
After that time has elapsed, you can check the updated website
You can easily create additional sections on your website
Let us create a new qmd file
We can easily remove categories by deleting the relevant .qmd file
We then need to to update .yaml file
Let us now get back to the portfolio
Let us update the text
You can create your html files externally (i.e. in other folders)
You can then add them to your folder on your website and link to them
We will now work on getting a more professional-lokking home page
The following index.qmd will change from:
---
title: "Bogdan G. Popescu"
---
Hi! I am Data Analyst, recent graduate from XX University. I have a passion for public policy and data analytics. With a solid background in R programming, data analysis, visualization, and Geographic Information Systems (GIS), I’m ready to tackle the complex challenges at the intersection of data and public policy. On this website, you’ll find a showcase of my projects, demonstrating my ability to analyze societal issues, visualize data trends, and propose actionable recommendations for policy improvements. Click on relevant categories to see these projects.
You can also check out my CV.We will now work on getting a more professional-lokking home page
We change the entire qmd file to:
---
title: "Bogdan G. Popescu"
image: images/popescu_photo.jpg
about:
template: trestles
image-width: 5cm
image-shape: round
links:
- icon: twitter
href: https://twitter.com/BogdanGPopescu1
- icon: github
href: https://github.com/bgpopescu
- icon: linkedin
href: https://www.linkedin.com/in/bogdanpopescu/
---
Hi! I am Data Analyst, recent graduate from XX University. I have a passion for public policy and data analytics. With a solid background in R programming, data analysis, visualization, and Geographic Information Systems (GIS), I’m ready to tackle the complex challenges at the intersection of data and public policy. On this website, you’ll find a showcase of my projects, demonstrating my ability to analyze societal issues, visualize data trends, and propose actionable recommendations for policy improvements. Click on relevant categories to see these projects.
You can also check out my <a href="/cv/bogdan-popescu-cv.pdf" target="_blank">CV</a>.To get this to work, you need to create two folders
images
cv
As you may guess, each one of these folders should have items inside
The images folder should have a picture of you: this is popescu_photo.jpg in my case
As you may guess, each one of these folders should have items inside
The cv folder should have your cv in pdf: this is bogdan-popescu-cv in my case
Once you have done so, you should go back to the index and update your relevant links
So update your Twitter, Linkedin, and Github.
Of course, there is not need to have all of them
Then render the qmd file
The output will look like below
You can play around with different templates.
Here I use: template: trestles
---
title: "Bogdan G. Popescu"
image: images/popescu_photo.jpg
about:
template: trestles
image-width: 5cm
image-shape: round
links:
- icon: twitter
href: https://twitter.com/BogdanGPopescu1
- icon: github
href: https://github.com/bgpopescu
- icon: linkedin
href: https://www.linkedin.com/in/bogdanpopescu/
---
Hi! I am Data Analyst, recent graduate from XX University. I have a passion for public policy and data analytics. With a solid background in R programming, data analysis, visualization, and Geographic Information Systems (GIS), I’m ready to tackle the complex challenges at the intersection of data and public policy. On this website, you’ll find a showcase of my projects, demonstrating my ability to analyze societal issues, visualize data trends, and propose actionable recommendations for policy improvements. Click on relevant categories to see these projects.
You can also check out my <a href="/cv/bogdan-popescu-cv.pdf" target="_blank">CV</a>.You can play around with different templates.
Here I use: template: trestles
Other options are:
Go to https://quarto.org/docs/websites/website-about.html to see what they look like
Let us do one final step and get rid of the bgpopescu2.github.io
We can do this by changing the yaml file
Let us do one final step and get rid of the bgpopescu2.github.io
We can do this by changing the yaml file
This is the final version
This is the final version
This is the final version
Rerender also the portfolio.qmd file in order to avoid bgpopescu2.github.io being displayed there
Rerender also the portfolio.qmd file in order to avoid bgpopescu2.github.io being displayed there
Rerender also the portfolio.qmd file in order to avoid bgpopescu2.github.io being displayed there
We are now ready to commit and push everything to Github
If you open GitHub Desktop, it automatically sees all the changes we have made
Congratulations!
You have created the skeleton of your first website
There are a variety of templates, changes, edit that you can make.
You can find below some two Youtube Videos that I found helpful in creating this tutorial:
Popescu (JCU): Lecture 20